<template>
    <div class="list-box"  >
        <div class="header-box">{{type_arr[type_i].title}}</div>
        <div class="select-custom-box">
            <selectCustom
                v-for="(item,index) in select_custom_arr" :key="index"
                :ref="`selectCustom${index}`"
                :option_list="item.arr"
                :select_id="item.val"
                @cheOptionvalue="cheOptionvalue($event, index)"
                @openSelect="openSelect(index)"
            ></selectCustom>
        </div>
        <div class="list-item-box" v-infinite-scroll="loadFun" v-if="bill_ls.length">
            <div class="list-item-div" v-for="(item,index) in bill_ls" :key="index">
                <div class="list-time-zone">{{item.time}}</div>
                <div class="list-datadir" v-for="(row, i) in item.ls" :key="i" @click="datadirFun(row.id)">
                    <div class="list-datadir-left" v-if="chData != 4">
                        <p class="name">{{row.cu_name}}</p>
                        <p class="identity"><span>{{row.sp_name}}</span></p>
                    </div>
                    <div class="list-datadir-right" :class="chData == 4? 'list-datadir-right-is': ''">
                        <p :class="Number(row.money) > 0?'mony':'negative'">{{row.money}}</p>
                        <span>{{row.paytitle}}</span>
                    </div>
                </div>
            </div>
        </div>
        <empty v-else />
        <el-dialog
            title="自定义时间范围"
            :visible.sync="dialogVisible"
            width="30%">
            <el-date-picker
                style="width: 100%"
                v-model="time_arr"
                type="datetimerange"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                @change="timestampFun(time_arr)"
            >
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="[getBillLsList(true),dialogVisible = false]">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import SelectCustom from "../comm/selectCustom.vue";
import empty from "../comm/empty.vue";
import config from "@/js/conf/Config.js";

export default {
    props: ['type_i'],
    components: {
        SelectCustom,
        empty
    },
    data () {
        return {
            dialogVisible: false,
            stime: "",
            dtime: "",
            time_arr: [],
            type_arr: [
                {
                    title: "收款记录",
                    type: 1,
                },
                {
                    title: "付款记录",
                    type: 2,
                },
            ],
            select_custom_arr: [
                {
                    key: "ch",
                    val: "1",
                    arr: [
                        {
                            name: "产品",
                            id: 1,
                        },
                        {
                            name: "服务",
                            id: 2,
                        },
                        {
                            name: "采购",
                            id: 3,
                        },
                        {
                            name: "其他",
                            id: 4,
                        },
                    ]
                },
                {
                    key: "time",
                    val: "0",
                    arr: [],
                },
                {
                    key: "payid",
                    val: "0",
                    arr: [],
                },
            ],
            pfrom: 0, // 页数
            bill_ls: [], // 列表数据
            chData: "", //  
        }
    },
    created () {
        this.getBillLsList(true)
    },  
    methods: {
        timestampFun (e,i) {
            if(!e || !e.length) return false;
            this.stime = e[0];
            this.etime = e[1];
        },
        loadFun (e) {
            this.pfrom++;
            this.getBillLsList();
        },
        datadirFun (e) {
            let obj = {
                ch: this.chData,
                id: e,
            }
            this.$emit('pushId',obj);
        },
        async getBillLsList (type) {
            // type 是否重置数据数组
            if (type) {
                this.pfrom = 0; // 重置页数
                this.bill_ls = [];
            };

            let param = {
                in_out: this.type_arr[this.type_i].type, // 1 是收款 2 是付款
                pnum: 20,
                pfrom: this.pfrom,
                stime: this.stime,
                dtime: this.etime,
            };

            this.select_custom_arr.forEach ( item=> { // 筛选赋值
                param[item.key] = item.val;
            })
            this.chData = param.ch;

            let url = config.CUSTOM_ABILL_LS2
            let res = await this.$api({ url: url, data: param });
            if (res.status != 1 && !res.data) return false
            
            if (res.data.bill_ls && res.data.bill_ls.length) {
                this.bill_ls.push(...res.data.bill_ls);
            } else return

            if (type) {
                let id = res.data.bill_ls[0].ls[0].id
                let obj = {
                    ch: this.chData,
                    id: id,
                }
                this.$emit('pushId',obj)
            }
            
            if (this.pfrom > 0) return false;
            // res.data.time.pop()
            this.select_custom_arr[1].arr = res.data.time;
            this.select_custom_arr[2].arr = res.data.pay;
        },
        cheOptionvalue(item, type) {
            this.select_custom_arr[type].val = item.id;
            if (item.id == 5 && type == 1) {
                this.dialogVisible = true;
                return false
            } 
            this.getBillLsList(true)
        },
        openSelect(i) {
            this.select_custom_arr.forEach( (item,index)=> {
                if (index != i) {
                    this.$refs[`selectCustom${index}`][0].is_select_show = false;
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
div,p,span{
    box-sizing: border-box;
}

.list-box {
    width: 345px;
    height: 100vh;
    border: 1px solid #e8dcdc;
    border-top: none;
    border-left: none;
    .header-box {
        width: 100%;
        height: 51px;
        border-bottom: 1px solid #e8dcdc;
        font-size: 18px;
        line-height: 51px;
        padding: 0 10px;
    }
    .list-item-box {
        width: 100%;
        height: calc(100vh - 51px);
        overflow: auto;
    }
    .select-custom-box {
        width: 100%;
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
        ::v-deep.list-select {
            top: auto;
        }
    }
    .list-item-div {
        width: 100%;
        &:last-child {
            border-bottom: 1px solid #f2f2f2;
        }
        .list-time-zone {
            width: 100%;
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            color: #949494;
            background: #f8f8f8;
            font-size: 12px;
        }
        .list-datadir {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 12px 10px;
            border-bottom: 1px solid #f2f2f2;
            cursor: pointer;
            &:hover{
                background: #f2f2f2;
            }
            .list-datadir-left {
                .name {
                    font-size: 14px;
                    color: #333333;
                }
                .identity {
                    font-size: 12px;
                    color: #a4a4a4;
                    white-space: pre-wrap;
                }
            }
            .list-datadir-right {
                text-align: right;
                .mony {
                    color: #00cc00;
                }
                .negative {
                    color: red;
                }
            }
            .list-datadir-right-is {
                text-align: left;
            }
        }
    }
}

.list-item-box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.list-item-box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
    background: #ccc; //rgba(0, 0, 0, 0.0);
    scrollbar-arrow-color: red;
}
.list-item-box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0);
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
}
</style>